<template>
  <div class="first">
    <div class="first-left">
      <ul>
        <li v-for="item in list" :key="item.id">
          <button>
            <router-link :to="item.path">{{ item.name }}</router-link>
          </button>
        </li>
      </ul>
    </div>
    <div class="first-right">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      list: [
        { id: 1, name: '超', path: '/Chao' },
        { id: 2, name: '要', path: '/Yao' },
        { id: 3, name: '帅', path: '/Shuai' },
        { id: 4, name: '楚', path: '/Chu' }

      ]
    }
  },
  created () {
  },
  activated () {
    console.log('Frist===activated');
  },
  deactivated () {
    console.log('Frist===deactivated');
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
.first {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  .first-left {
    width: 80px;
    height: 100%;
    background-color: seagreen;
    display: flex;
    justify-content: space-between;
    button {
      width: 80px;
      height: 25%;
      a {
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 80px;
      }
    }
  }
  .first-right {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
